<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>房间预订</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="Thu, 19 Nov 1900 08:52:00 GMT">
        <link rel="shortcut icon" href="images/icons/favicon.ico" th:href="@{/images/icons/favicon.ico}">
        <link rel="apple-touch-icon" href="images/icons/favicon.png" th:href="@{/images/icons/favicon.png}">
        <link rel="apple-touch-icon" sizes="72x72" href="images/icons/favicon-72x72.png" th:href="@{/images/icons/favicon-72x72.png}">
        <link rel="apple-touch-icon" sizes="114x114" href="images/icons/favicon-114x114.png" th:href="@{/images/icons/favicon-114x114.png}">
        <!--Loading bootstrap css-->
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700">
        <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald:400,700,300">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css" th:href="@{/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/font-awesome/css/font-awesome.min.css" th:href="@{/vendors/font-awesome/css/font-awesome.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap/css/bootstrap.min.css" th:href="@{/vendors/bootstrap/css/bootstrap.min.css}">
        <!--LOADING STYLESHEET FOR PAGE-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/intro.js/introjs.css" th:href="@{/vendors/intro.js/introjs.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/calendar/zabuto_calendar.min.css" th:href="@{/vendors/calendar/zabuto_calendar.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/sco.message/sco.message.css" th:href="@{/vendors/sco.message/sco.message.css}">
        <!--Loading style vendors-->
        <link type="text/css" rel="stylesheet" href="../static/vendors/animate.css/animate.css" th:href="@{/vendors/animate.css/animate.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-pace/pace.css" th:href="@{/vendors/jquery-pace/pace.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/iCheck/skins/all.css" th:href="@{/vendors/iCheck/skins/all.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/jquery-notific8/jquery.notific8.min.css" th:href="@{/vendors/jquery-notific8/jquery.notific8.min.css}">
        <link type="text/css" rel="stylesheet" href="../static/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css" th:href="@{/vendors/bootstrap-daterangepicker/daterangepicker-bs3.css}">
        <!--Loading style-->
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" class="default-style" th:href="@{/css/themes/style1/orange-blue.css}">
        <link type="text/css" rel="stylesheet" href="../static/css/themes/style1/orange-blue.css" id="theme-change" class="style-change color-change" th:href="@{/css/themes/style1/orange-blue.css}">
        <!--  <link type="text/css" rel="stylesheet" href="css/style-responsive.css">-->
        <!--新增加的css样式-->
        <link type="text/css" rel="stylesheet" href="../static/css/addcss.css" th:href="@{/css/addcss.css}">
        <script src="/static/js/jquery-2.1.1.min.js" th:src="@{/js/jquery-2.1.1.min.js}"></script>
        <style>
            #reserveTab th,#reserveTab td{
                text-align: center;
            }
        </style>
    </head>
    <body class=" ">
        <div>
            <!--BEGIN BACK TO TOP-->
            <a id="totop" href="#"><i class="fa fa-angle-up"></i></a>
            <!-- 引用头部 -->
            <div th:replace="common/top::topFragment"></div>
            <!--END TOPBAR-->
            <div id="wrapper">
                <!-- 引用左菜单导航栏 -->
                <div th:replace="common/leftToolBar::leftToolbar"></div>
                <!--END CHAT FORM-->
                <!--BEGIN PAGE WRAPPER-->
                <div id="page-wrapper">
                    <!-- 引用工具条 -->
                    <div th:replace="common/toolBar::toolBar"></div>
                    <!--END TITLE & BREADCRUMB PAGE-->
                    <!--BEGIN CONTENT-->
                    <!--右侧区内容的编写 -->
                    <div class="page-content">
                        <div th:replace="stay/common/modal::modal"></div>
                        <div><button class="btn btn-success" onclick="javascript:location.href = '/orders/goToAddReserveOrCheckInRegister?statusName=预订'" style="background: grey;border: 0px;margin-bottom: 10px">添加预订</button></div>
                        <div>
                            <form th:action="@{/orders/getOrdersList(pageNum=1,orderState=预订中)}" method="post">
                                客户名称：<input name="name" th:value="${name}" style="margin-right: 15px"/>
                                身份证号：<input name="idNumber" th:value="${idNumber}" style="margin-right: 15px; width: 255px"/>
                                房型：<input name="typeName" th:value="${typeName}" style="margin-right: 20px"/>
                                <button type="submit" style="background: gainsboro;width: 55px;height: 35px;border-radius: 7px;">查询</button>
                            </form>
                        </div>
                        <!-- 预订数据列表 -->
                        <table id="reserveTab" class="table table-striped" border="red solid 1px">
                            <thead>
                                <tr>
                                    <th>订单编号</th>
                                    <th>客户名称</th>
                                    <th>房间号</th>
                                    <th>房型名</th>
                                    <th>预订时间</th>
                                    <th>离店时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr th:each="order : ${pageInfo.getList()}">
                                    <td th:text="${order.ordersId}"></td>
                                    <td th:text="${order.customer.name}"></td>
                                    <td th:text="${order.room.roomId}"></td>
                                    <td th:text="${order.room.roomType.typeName}" th:value="${order.room.roomType.roomTypeId}"></td>
                                    <td>[[${#dates.format(order.reservedDate,'yyyy-MM-dd HH:mm:ss')}]]</td>
                                    <td>[[${#dates.format(order.checkOutDate,'yyyy-MM-dd HH:mm:ss')}]]</td>
                                .   <td>[[${order.status.statusName}]]</td>
                                    <td>
                                        <button style="background: gainsboro;" th:onclick="cancelReserve([[${order.ordersId}]],this);">取消预订</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <!-- 分页工具条 -->
                        <div>
                            <ul class="pager">
                                <li><a th:href="@{/orders/getOrdersList(pageNum=1,name=${name},idNumber=${idNumber},typeName=${typeName},orderState=预订中)}">首页</a></li>
                                <li><a th:href="@{/orders/getOrdersList(pageNum=${pageInfo.isHasPreviousPage()}?${pageInfo.getPrePage()}:1,name=${name},idNumber=${idNumber},typeName=${typeName},orderState=预订中)}">&laquo;</a></li>
                                <li>第 [[${pageInfo.pageNum}]] 页</li>
                                <li><a th:href="@{/orders/getOrdersList(pageNum=${pageInfo.isHasNextPage()}?${pageInfo.getNextPage()}:${pageInfo.pages},name=${name},idNumber=${idNumber},typeName=${typeName},orderState=预订中)}">&raquo;</a></li>
                                <li><a th:href="@{/orders/getOrdersList(pageNum=${pageInfo.pages},name=${name},idNumber=${idNumber},typeName=${typeName},orderState=预订中)}">尾页</a></li>
                                <li>&nbsp;&nbsp;&nbsp;总页数 [[${pageInfo.pages}]] </li>
                                <li>&nbsp;&nbsp;&nbsp;总记录数 [[${pageInfo.total}]] </li>
                            </ul>
                        </div>
                    </div>
                    <!--END CONTENT-->
                </div>
                <!-- 引用底部 -->
                <div th:replace="common/bottom::bottom"></div>
                <!--END FOOTER-->
                <!--END PAGE WRAPPER-->
            </div>
        </div>
        <script th:src="@{/js/stay/modal.js}"></script>
        <script th:src="@{/js/stay/stay.js}"></script>
        <script>
            //显示当前功能导航
            showModuleText("房间预订");
            //取消预订
            function cancelReserve(ordersId,thisElement){
                $("#btnContainer button:not(#close)").remove();//将之前的确定按钮全部删除
                //在关闭按钮前面添加确定按钮
                $("#content").next().prepend('<button type="button" id="confirm" class="btn btn-info">确定</button>');
                showModal("温馨提示","您确定要取消预订?");
                $("#myModal #confirm").click(function(){
                    $("#myModal").modal("hide"); //隐藏提示框
                    var url = "/orders/updateOrderStatus";
                    var param = "ordersId=" + ordersId + "&statusName=取消预订&roomTypeId="+ $(thisElement).parent().parent().children().eq(3).attr("value") + "&roomId=" + $(thisElement).parent().parent().children().eq(2).html();
                    $.post(url,param,function(data){
                        if (data.message == "取消预订成功" && data.state == 200){
                            alert(data.message);
                            location.href = "/orders/getOrdersList?pageNum=1&orderState=预订中";
                            return;
                        }
                        $("#btnContainer button:not(#close)").remove();//将之前的确定按钮全部删除
                        setTimeout(function(){showModal("温馨提示",data.message);},"1500");
                    },"json");
                });
            }
        </script>
        <!-- 引用脚本 -->
        <div th:replace="common/script::script"></div>
    </body>
</html>
